<template>
  <div class="app-container">
    <div class="list flex flex-wrap gap-4">
      <template v-for="(item, index) in bannerList?.banner?.list" :key="index">
        <el-card style="max-width: 350px;" shadow="hover">
          <template #header>{{ item.title }}</template>
          <img
            :src="item.image"
            style="width: 100%"
          />
        </el-card>
      </template>
    </div>
  </div>
</template>

<script setup>
import { useHomeStore } from "@/store";

// 引入homestore
const homeStore = useHomeStore();
homeStore.getBannerList();
const { count, bannerList } = storeToRefs(homeStore);
console.log(bannerList.value, "home-store");

onMounted(() => {});
onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.list {
  background-color: #fff;
}
</style>
